<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<link rel="stylesheet" media="all" type="text/css"	href="<c:url value="/resources/css/styles.css" />">
<script type="text/javascript"	src='<c:url value="/resources/js/jquery-1.11.1.min.js" />'></script>
<script type="text/javascript"	src='<c:url value="/resources/js/jquery.ad-gallery.js" />'></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<style>

  #map_canvas {
    width: 700px;
    height: 400px;
}    
</style>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Records Map</title>
</head>
<body >
	<div class="header">
		<div class="topnav">
			<ul id="nav">
				<li><a href="/TravelJournal/">Log Out</a></li>
			</ul>
		</div>
	</div>


	<div id="content">
		<div id="sidebar">
			<ul>
				<li><a href="/TravelJournal/welcome">Home</a></li>
				<li><a href="/TravelJournal/records/myrecords">My Records</a></li>
				<li><a href="/TravelJournal/records/addrecord">Add Record</a></li>
				<li><a href="#">My Travel Map</a></li>
			</ul>
		</div>
		<div id="map_canvas"></div>
		<div class="main-content">		
			<div id="userName" style="display: none;">${username}</div>

		
		</div>
	</div>
	<script type="text/javascript"> 
	$(document).ready(function () {
		var user = document.getElementById('userName').innerHTML;
	    var map;
	    var elevator;
	    var myOptions = {
	        zoom: 1,
	        center: new google.maps.LatLng(0, 0),
	      //  mapTypeId: 'terrain'
	    };
	    map = new google.maps.Map($("#map_canvas")[0], myOptions);
	    var addresses = new Array();
		$.getJSON('/TravelJournal/records/'+user+'/list', {
			ajax : 'true'
		}, function(data) {
			var len = data.length;
			for (var i = 0; i < len; i++) {				
				addresses[i] = data[i].city.name.trim() + ', '+ data[i].country.name.trim();
				 $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[i]+'&sensor=false', null, function (data) {
			            var p = data.results[0].geometry.location
			            var latlng = new google.maps.LatLng(p.lat, p.lng);
			            new google.maps.Marker({
			                position: latlng,
			                map: map
			            });

			        });
			}

		});

	});
</script>
</body>

</html>